<template>
   <el-card shadow="always" >
    <!---- -- -- -- 头部-- -- -- -- -- -- -->
    <div slot="header">
      <!-- 路径导航 -->
      <Breadcrumb/>
    </div>
    <!---- -- -- -- 内容区域-- -- -- -- -- -- -->
     <!-- 4.表格区域 -->
    <div class="table-box">
      <!-- 普通表格 -->
      <!-- <el-table :data="list" border >
        <el-table-column align="center" type="index"  width="120" label="序号"></el-table-column>
        <el-table-column align="center" label="ID" prop="id"></el-table-column>
        <el-table-column align="center" label="权限名称" prop="authName"></el-table-column>
        <el-table-column align="center" label="地址" prop="path"></el-table-column>
        <el-table-column align="center" label="层级">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.level==0" type="primary">一级</el-tag>
            <el-tag size="small" v-if="scope.row.level==1" type="success">二级</el-tag>
            <el-tag size="small" v-if="scope.row.level==2" type="warning">三级</el-tag>
          </template>
        </el-table-column>
      </el-table> -->
      <!-- 树形表格 -->
      <el-table :data="list" row-key="id" :tree-props="{ children:'children' }"  border >
        <el-table-column align="center" label="ID" prop="id"></el-table-column>
        <el-table-column align="center" label="权限名称" prop="authName"></el-table-column>
        <el-table-column align="center" label="地址" prop="path"></el-table-column>
      </el-table>
    </div>
   </el-card>
</template>

<script>
export default {
  name: 'Rights',
  data () {
    return {
      // 1.权限列表信息
      list: []
    }
  },
  created () {
    // 3. 调用数据请求方法
    this.getRightsList()
  },
  methods: {
    // 2.获取权限列表方法
    async getRightsList () {
      // const { data: res } = await this.$axios.get('/rights/list') // 发请求
      const { data: res } = await this.$axios.get('/rights/tree') // 发请求
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg) // 错误处理
      this.list = res.data // 成功赋值
    }
  }
}
</script>

<style>

</style>
